<script setup>
// 新闻动态
import { ref,onMounted} from 'vue'
import { newclassApi, newlistApi } from '../../api/index'
import { ElMessage, ElMessageBox } from 'element-plus'

import { useRouter,useRoute } from 'vue-router'

const router = useRouter()
const newclass = ref([])
const list = ref([
])
const total = ref(0)
const count =ref()
const tabs = ref()
const currentPage2 = ref(1)
const pageSize2 = ref(20)

// 切换
const tabsswitch = function (value) {
    tabs.value = value
    currentPage2.value = 1
    newlist(1)
}
// 切换页码
const handleCurrentChange = function (val) {
    scrollTo(0,0)
    newlist(val)
}

// 获取新闻列表
const newlist = async function (pg) {
    const msg = await newlistApi({
        limit: 20,
        page: pg,
        ColumnsId: tabs.value,
    })
    if (msg.data.code == 0) {
        list.value = msg.data.data
        total.value = msg.data.total
    }
}

// 获取新闻tab栏
const getclass = async function () {
    const msg = await newclassApi()
    if (msg.data.code == 0) {
        newclass.value = msg.data.data
        tabs.value = newclass.value[0].id
        // 一进页面拿第一项tab栏的新闻列表数据
        newlist(1)
    }
}

const push = function (id) {
  router.push({path:'/new_list/newDtlist',query:{id:id}})
}
onMounted(() => {
    getclass()
})

</script>
<template>
    <div class="banner"></div>
    <div class="tit">
        <div class="main">
            <div class="inner" id="focus" style="display:flex">
                <div class="lb" v-for="(item,index) in newclass" :key="index" :class="{'on':tabs== item.id}"  @click="tabsswitch(item.id)">{{ item.title }}</div>
            </div>
        </div>
    </div>
    <!-- 主体 -->
    <div class="main">
        <div class="newsPage">
            <div class="list" style="width: 1200px;" v-for="(item,index) in list" :key="index">
                <a @click="push(item.id)" :to="{path:'/new_list/newDtlist',query:{id:item.id}}">
                    <div class="img" style="width: 180px;height:180px"><img :src="item.thumb" alt=""  style="width: 100%;height:100%"/>
                    </div>
                    <div class="txt">
                        <strong>{{ item.title }}</strong>
                        <p>
                            {{ item.description }}
                        </p>
                        <span>查看详情&gt;&gt;</span>
                        <span class="upTime">{{ item.update }}</span>
                    </div>
                </a>
            </div>
        </div>
        <div class="page" style="clear:both">
            <span class="Notices">共<strong>{{ total }}</strong>条数据,分<strong>{{ Math.ceil(total/20) }}</strong>页显示,当前为第<strong>{{ currentPage2 }}</strong>页。</span>
            <el-pagination
                v-model:current-page="currentPage2"
                v-model:page-size="pageSize2"
                :small="small"
                background
                :disabled="disabled"
                :background="background"
                layout="prev, pager, next"
                :total="total"
                :page-sizes="count"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                />
         <!-- <span class="nopage">上一页</span>
            <span class="pagefont">1</span>
            <a title="" href="#">2</a>
            <a title="" href="#">3</a>
            <a title="" href="#">4</a>
            <a title="" href="#">5</a>
            <a title="" href="#">下一页</a> -->
        </div>
    </div>
    <div style="clear:both"></div>
</template>
<style scoped>
:deep(.el-pagination.is-background .el-pager li.is-active){
    background-color: #FCBE00;
   
}

</style>